
/**
 * Created by Administrator on 2017/10/19.
 */
import React from 'react';
import ImgShare from 'assets/img/share.png';
import ImgQues from 'assets/img/ques.png';
import ImgMusic from 'assets/img/music.png';
import ImgMuclo from 'assets/img/music_clo.png';
import css from './index.less';
import { observer, inject } from 'mobx-react';

@inject('store')
@observer

export default class TopBar extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      // musicPlay: false

    };
  }

  share() {

    Tida.share({
      title: '夜探紫禁城，抢双11专属红包 ',
      content: '限量送故宫官方正版笔记本，1元秒杀故宫千里江山桌垫',
      url: '//sxhd.ews.m.jaeapp.com/hd/gugong/',
      image: '//img.alicdn.com/imgextra/i2/3355153118/TB2QZXgXj3z9KJjy0FmXXXiwXXa-3355153118.png',
    }, function(data) {
      console.log('share', data);
    });
  }

  music() {
    // console.log(111);
    // 加入购物车
    // Tida.cart({
    //   sellerNick: '盛夏测试店铺',
    //   itemId: '559964345943',
    //   skuId: '73068526031'
    // }, function(data) {
    //   console.log(data);
    // });

    // const { musicClick = () => {} } = this.props;
    // musicClick();
    this.props.store.musicSet();

    // if (this.state.musicPlay){
    //   this.musicPaused();
    // } else {
    //   this.musicPlay();
    // }

  }


  // musicPicture() {
  //   const { isMusic } = this.props;
  //   if (isMusic == true) {
  //     this.refs.bgm.paly();
  //   } else if (isMusic == false) {
  //     this.refs.bgm.pause();
  //   }
  // }

  // musicPlay() {
  //   // this.refs.bgm.play();
  //   this.setState({
  //     musicPlay: true
  //   });
  // }

  // musicPaused() {
  //   // this.refs.bgm.pause();
  //   this.setState({
  //     musicPlay: false
  //   });
  // }

  // componentDidMount() {
  //   this.musicPlay();
  // }

  ques() {
    const { quesClick = () => {} } = this.props;
    quesClick();
  }

  render() {
    const { opa, isMusic } = this.props;
    // const { musicPlay } = this.state;
    const props = {
      className: css.topBar,
      style: {
        opacity: `${opa}`,
      }
    };
    return (
    <div {...props}>
      <div onClick={() => {this.share();}} className={css.btnBg}>
        <img src={ImgShare} />
      </div>

      <div onClick={() => {this.music();}} className={css.btnBg}>
        { isMusic == true ? <img src={ImgMusic} /> : <img src={ImgMuclo} className={css.closeMusic} />}
      </div>

      <div onClick={() => {this.ques();}} className={css.btnBg}>
        <img src={ImgQues} />
      </div>


    </div>


    );
  }
}
